<template>
	<view class="root">
		<view class="title">
			<text>欢迎加入</text>
		</view>
		<view class="subTitle">
			<text>一键注册加入我们，共同关注护眼健康</text>
		</view>
		<view class="input">
			<up-icon name="phone-fill" color="#41BC78" size="46rpx"></up-icon>
			<input type="number" @input="onPhoneInput" v-model="phone" placeholder="请输入手机号" />
		</view>
		<view class="err_tips" v-if="phoneTips !== ''">{{phoneTips}}</view>
		<view class="" style="height: 26rpx;"></view>
		<view class="codeInput">
			<input type="number" placeholder="请输入验证码" v-model="code" />
			<view class="line"></view>
			<view class="tips">
				<up-code ref="uCode2" keep-running @change="codeChange2" start-text="获取验证码"></up-code>
				<text @tap="getCode2" :text="tips2" class="u-page__code-text">{{tips2}}</text>
			</view>
		</view>
		<view class="input">
			<up-icon name="lock-fill" color="#41BC78" size="46rpx"></up-icon>
			<input type="password" v-model="passWord" @input="onPwdInput" placeholder="请输入密码" />
		</view>
		<view class="err_tips" v-if="pwdTips !== ''">{{pwdTips}}</view>
		<view class="footer">
			<view class="btn" @click="register">
				<text>进入首页</text>
				<view class="icon">
					<view class="arrow"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		toast
	} from '@/node_modules/uview-plus'
	import {
		test
	} from '@/node_modules/uview-plus';
	import {
		get_code,
		register_api
	} from '@/api/index.js';
	// 验证码、密码、手机号等状态
	const passWord = ref('');
	const pwdTips = ref('');

	const phone = ref('');
	const phoneTips = ref('');

	const code = ref('');
	const codeTips = ref('');

	// 规则
	const pwdReg = /^[a-zA-Z0-9!@#$%^&*()_+]{8,20}$/; // 密码

	const onPwdInput = (e) => {
		pwdTips.value = pwdReg.test(passWord.value) ? '' : '密码格式不正确（8-20位字母/数字/特殊字符）';
	}

	const onPhoneInput = (e) => {
		phoneTips.value = test.mobile(phone.value) ? '' : '手机号格式不正确';
	}

	// 验证码逻辑
	let tips2 = ref('');
	let uCode2 = ref();
	const codeChange2 = (text) => {
		tips2.value = text;
	}

	const getCode2 = () => {
		if (uCode2.value.canGetCode) {
			if (!test.mobile(phone.value)) {
				toast('请先输入正确手机号');
				return;
			}
			get_code({
				target: phone.value,
				type: 'phone'
			}).then(res => {
				console.log(res);
			}).finally(() => {
				toast('验证码已发送');
				uCode2.value.start();
			})
		} else {
			toast('倒计时结束后再发送');
		}
	}

	// 提交注册
	const register = () => {
		onPwdInput()
		onPhoneInput()
		if (phone.value && passWord.value) {
			// 注册
			register_api({
				phone: phone.value,
				userPW: passWord.value,
				captcha: code.value
			}).then(res => {
				if(res.code === 200) {
					toast('登录成功');
					const token = res.data.userToken
					if(token) {
						uni.setStorageSync('token',token)
					}
					// 判断是否为初次进入
					// if (uni.getStorageSync('isFirst')) {
					// 	uni.redirectTo({
					// 		url: '/pages/main/index'
					// 	})
					// } else {
					// 	uni.redirectTo({
					// 		url: '/pages/index/index'
					// 	})
					// }
					uni.reLaunch({
						url:'/pages/launch/launch'
					})
				}
			})
		}
	}
</script>

<style lang="less" scoped>
	.root {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.title {
			padding-top: 221rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 63rpx;
			color: #000000;
			letter-spacing: 4rpx;
		}

		.subTitle {
			margin-top: 14rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.49);
			text-align: center;
			margin-bottom: 128rpx;
		}

		.input {
			width: 666rpx;
			margin: 0 auto 0 auto;
			position: relative;

			:deep(.u-icon__icon) {
				position: absolute;
				right: 42rpx;
				top: 0;
				bottom: 0;
			}

			input {
				width: 100%;
				height: 123rpx;
				background-color: #F5F5F5;
				border-radius: 35rpx;
				padding-left: 35rpx;
				padding-right: 100rpx;
				box-sizing: border-box;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				border: 4rpx solid #F5F5F5;
				transition: .3s;
			}

			input:hover,
			input:focus {
				border: 4rpx solid #E72222;
			}
		}

		.codeInput {
			width: 666rpx;
			height: 129rpx;
			background-color: #F5F5F5;
			border-radius: 35rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 21rpx 40rpx 33rpx;
			box-sizing: border-box;
			margin: 0 auto 37rpx auto;
			column-gap: 16rpx;
			transition: .3s;
			border: 4rpx solid #F5F5F5;

			input {
				flex: 1;
				height: 100%;
				box-sizing: border-box;
			}

			.line {
				width: 4rpx;
				height: 53rpx;
				background-color: #979797;
			}

			.tips {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 25rpx;
				color: #149A50;
				letter-spacing: 2rpx;
			}
		}

		.codeInput:hover,
		.codeInput:focus {
			border: 4rpx solid #E72222;
		}

		.footer {
			width: 666rpx;
			margin: 320rpx auto 0 auto;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;

			.btn {
				padding: 40rpx 47rpx 39rpx 67rpx;
				border-radius: 35rpx;
				background-color: #035A36;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				column-gap: 79rpx;

				.icon {
					width: 72rpx;
					height: 2rpx;
					background-color: #fff;
					position: relative;

					.arrow {
						width: 16rpx;
						height: 16rpx;
						background: linear-gradient(45deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						margin: auto 0;
						transform: rotateZ(45deg);
					}
				}
			}
		}
	}

	.err_tips {
		padding-left: 44rpx;
		font-size: 24rpx;
		color: #E72222;
		margin: 8rpx 0;
	}
</style>